<template>
  <div>
    <!-- 表单 -->
    <TopFilter ref="form" :cols="3" :list="list" @filterChange="formChange"></TopFilter>
    <!-- 表格 -->
    <FilterTable
      ref="table"
      height="auto"
      maxHeight="350"
      :columns="columns"
      :datakey="'rows'"
      selectionType="single"
      :fetchapi="fetchApi"
      :params="fetchParams"
      columnsRef="partPartOutboundPartSalesQuoteComponentsChooseOwner"
      :onRowSelectChange="arr => (this.onChangeColumn = arr)"
      :onColumnsChange="columns => (this.columns = columns)"
    >
    </FilterTable>
    <div class="btnWrap">
      <el-button size="small" @click="cancel()">取 消</el-button>
      <el-button size="small" type="primary" @click="determine">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
// 接口要改
import { owner } from '@/api/part/partOutbound/partSalesQuote/index.js';
export default {
  name: 'partSalesQuote',
  components: {},
  mixins: [dictionary],
  data() {
    return {
      onChangeColumn: [], // 选择的数据信息
      fetchApi: owner, // 接口要改
      fetchParams: { xhrAbort: true },
      list: this.createList(),
      columns: this.createColumns(),
      /** 模态框 状态 */
      isShowquotationNumber: false
    };
  },
  computed: {},
  mounted() {},
  methods: {
    // 确定方法
    determine() {
      if (this.onChangeColumn.length != 1) {
        this.$notify.error({
          title: '错误',
          message: '请选择一条内容'
        });
      } else {
        this.$emit('confirm', this.onChangeColumn);
      }
    },
    // 取消的方法
    cancel() {
      this.$emit('cancel');
    },
    // 表单的方法
    formChange(val) {
      console.log(val);
      this.fetchParams.xhrAbort = true;
      this.fetchParams = Object.assign(this.fetchParams, val, { xhrAbort: false });
    },
    createList() {
      return [
        {
          type: 'INPUT',
          label: '车主编号',
          fieldName: 'ownerNo'
        },
        {
          type: 'INPUT',
          label: '车主名称',
          fieldName: 'ownerName'
        },
        {
          type: 'INPUT',
          label: '车主拼音',
          fieldName: 'ownerSpell'
        },
        {
          type: 'INPUT',
          label: '车主手机',
          fieldName: 'mobile'
        },
        {
          type: 'INPUT',
          label: '车牌号码',
          fieldName: 'license'
        },
        {
          type: 'SELECT',
          label: '在修',
          fieldName: 'isRepair',
          placeholder: '',
          initialValue: '',
          itemList: this.createDictList('1004')
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin',
          showOverflowTooltip: true
        }
      ];
    },
    createColumns() {
      return [
        {
          title: '序号',
          width: 50,
          dataIndex: 'xuhao',
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '车主编号',
          minWidth: 150,
          dataIndex: 'ownerNo',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车主名称',
          minWidth: 120,
          dataIndex: 'ownerName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车主性质',
          dataIndex: 'ownerProperty',
          sorter: true,
          editable: false,
          editType: 'select',
          editItems: this.createDictList(8011),
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList(8011)
        },
        {
          title: '车主手机',
          dataIndex: 'mobile',
          showOverflowTooltip: true,
          sorter: true,
          filter: true
        },
        {
          title: '车牌号',
          dataIndex: 'license',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: 'VIN',
          dataIndex: 'vin',
          sorter: true,
          width: 150,
          filter: true,
          filterType: 'input'
        },
        {
          title: '地址',
          dataIndex: 'address',
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    }
  }
};
</script>

<style scoped>
.btnWrap {
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 9;
  border-top: 1px solid rgb(233, 233, 233);
  padding: 10px 20px;
  background: rgb(255, 255, 255);
  text-align: right;
}
</style>
